<template>
  <el-card class="card_box">
    <div class="card_header">
      <span class="card_title">数据概览</span>
    </div>
    <el-row justify="space-between" class="dataAtAGlance_wapper">
      <el-col :span="4" class="item_wrapper"
              :style="{borderRight: index == dataAtAGlance.data.length -1 ? 'none' : '1px solid #E7E7E7'}"
              v-for="(item,index) in dataAtAGlance.data" :key="item.id">
        <span>{{ formatNumber(item.amount) }}</span>
        <el-button v-if="item.name == '美团CDK' || item.name == '饿了么联名卡'"
                   :type="item.name == '美团CDK' || item.name == '饿了么联名卡' ? 'primary' : 'text' " link
                   @click="handleJumpOverview(item)">{{
            item.name == '美团CDK' ? '美团CDK >' : item.name == '饿了么联名卡' ? '饿了么联名卡 >' : ''
          }}
        </el-button>
        <span v-else>{{ item.name }}</span>
      </el-col>
    </el-row>
  </el-card>

  <el-card class="card_box">
    <template #header>
      <div class="card_header">
        <span class="card_title">订单管理</span>
      </div>
    </template>
    <el-form ref="formRef" :model="form.data" inline>
      <el-row align="top" justify="center">
        <el-col :xs="8" :sm="8" :md="7" :lg="7" :xl="6">
          <el-form-item label="支付时间">
            <el-date-picker
                v-model="form.data.date"
                type="daterange"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间"
                @change="changeTime"
                :editable="false"
                :class="form.data.date.length ? 'date_prefix_show':'date_prefix_close'"
                clearable
            />
          </el-form-item>
          <el-form-item label="骑手姓名">
            <el-input v-model="form.data.riderName" clearable placeholder="骑手姓名"
                      style="width: 255px !important"></el-input>
          </el-form-item>
          <el-form-item label="租赁单号">
            <el-input
                v-model="form.data.rentalOrderNumber"
                clearable
                placeholder="租赁单号"
                style="width: 255px !important"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="7" :xl="6">
          <el-form-item label="支付平台">
            <el-select v-model="form.data.paymentPlatforms" placeholder="请选择" clearable>
              <el-option v-for="item in paymentPlatformsList.data" :key="item.value" :label="item.value"
                         :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="骑手电话">
            <el-input v-model="form.data.riderPhone" clearable placeholder="骑手电话"
                      style="width: 255px !important"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="8" :sm="8" :md="8" :lg="7" :xl="6">
          <el-form-item label="用户类型">
            <el-select v-model="form.data.userType" placeholder="请选择" clearable>
              <el-option v-for="item in userTypeList.data" :key="item.value" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item label="订单状态">
            <el-select v-model="form.data.status" placeholder="请选择" clearable>
              <el-option v-for="item in statusList.data" :key="item.value" :label="item.value" :value="item.key"/>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-row :gutter="28" justify="space-between">
              <el-col :span="6">
                <el-button type="primary" icon="Search" @click="initialize()">搜索</el-button>
              </el-col>
              <el-col :span="6">
                <el-button icon="Refresh" @click="reset">重置</el-button>
              </el-col>
              <el-col :span="6">
                <el-button icon="Download" @click="handExport">导出</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <!-- 表格主体 -->
  <el-card>
    <template #header>
      <div class="card_header">
        <span class="card_title">列表展示</span>
        <div class="table_invoicedAmount">
          <span>未开票金额：</span>
          <span>{{ formatNumber(26326) }}</span>
        </div>
      </div>
    </template>
    <div class="global_table_wrapper">
      <el-table
          :data="dataList.data"
          highlight-current-row
          stripe
          :cell-style="{ textAlign: 'center' }"
          :header-cell-style="{ textAlign: 'center', background: '#f8f8f9' }"
          border
          max-height="500"
      >
        <el-table-column type="index" label="序号" min-width="70"/>
        <el-table-column label="租赁单号（订单号）" min-width="280" :show-overflow-tooltip="true">
          <template #default="{ row }">
            <div class="table_format">
              <div>
                <span>订单号：</span>
                <span>{{ row.orderInfo.orderNumber }}</span>
              </div>
              <div>
                <span>状&nbsp;&nbsp;&nbsp;态：</span>
                <span>{{ row.orderInfo.status }}</span>
              </div>
              <div>
                <span>客户端：</span>
                <span>{{ row.orderInfo.channel }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="骑手信息" min-width="220" :show-overflow-tooltip="true">
          <template #default="{ row }">
            <div class="table_format">
              <div>
                <span>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名：</span>
                <span>{{ row.riderInfo.name }}</span>
              </div>
              <div>
                <span>电&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;话：</span>
                <span>{{ row.riderInfo.phone }}</span>
              </div>
              <div>
                <span>用户类型：</span>
                <span>{{ row.riderInfo.type }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="套餐信息" min-width="220" :show-overflow-tooltip="true">
          <template #default="{ row }">
            <div class="table_format">
              <div>
                <span>原套餐租金：</span>
                <span>{{ row.packageInfo.originalPackageRental }}</span>
              </div>
              <div>
                <span>购&nbsp;买&nbsp;数&nbsp;量：</span>
                <span>{{ row.packageInfo.quantityPurchased }}</span>
              </div>
              <div>
                <span>实&nbsp;际&nbsp;租&nbsp;金：</span>
                <span>{{ row.packageInfo.actualRent }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="支付信息" min-width="220">
          <template #default="{ row }">
            <div class="table_format">
              <div>
                <span>折&nbsp;&nbsp;&nbsp;扣：</span>
                <span>{{ row.paymentInfo.discount }}</span>
              </div>
              <div>
                <span>手续费：</span>
                <span>{{ row.paymentInfo.premium }}</span>
              </div>
              <div>
                <span>支付总金额：</span>
                <el-link type="primary" @click="handleJump('pay',row)">{{
                    row.paymentInfo.payTheTotalAmount
                  }}
                </el-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="开票信息" min-width="220">
          <template #default="{ row }">
            <div class="table_format">
              <div>
                <span>已&nbsp;&nbsp;&nbsp;开&nbsp;&nbsp;&nbsp;票：</span>
                <span>{{ row.invoicingInfo.invoiced }}</span>
              </div>
              <div>
                <span>总开票金额：</span>
                <el-link type="primary" @click="handleJump('billing',row)"
                >{{ row.invoicingInfo.theTotalInvoicedAmount }}
                </el-link>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="退押" min-width="225">
          <template #default="{ row }">
            <div v-if="row.surrender">{{ `已退：${row.surrender}` }}</div>
            <el-link v-else type="primary" @click="handleJump('surrender',row)">退押</el-link>
          </template>
        </el-table-column>
        <!--            <el-table-column fixed="right" label="操作" width="250">-->
        <!--              <template #default="scope">-->
        <!--                <el-button type="primary" size="small" @click="jumpAssetDetails(scope.row)">-->
        <!--                  资产明细-->
        <!--                </el-button>-->
        <!--              </template>-->
        <!--            </el-table-column>-->
      </el-table>
      <div class="pagination">
        <Pagination
            :total="form.data.total"
            v-model:page="form.data.pageNo"
            v-model:limit="form.data.pageSize"
            @pagination="initialize"
        />
      </div>
    </div>
  </el-card>
</template>
<script setup lang="ts">
import Pagination from "@/components/Pagination/index.vue";
import dayjs from "dayjs";
import {formatNumber} from "@/utils/wheel";
import {ElMessage, ElMessageBox} from "element-plus";

const router = useRouter()
let form = reactive<{ data: Record<string, any> }>({
  data: {
    date: [],
    startTime: "",
    endTime: "",
    paymentPlatforms: "all",
    userType: "全部",
    status: "全部",
    riderName: "",
    riderPhone: "",
    rentalOrderNumber: "",
    pageNo: 1,
    pageSize: 10,
    total: 0
  }
});
const formRef = ref();
let dataAtAGlance = reactive<{ data: Record<string, any> }>({
  data: []
})
const dataList = reactive<{ data: Record<string, any> }>({
  data: []
});
const paymentPlatformsList = reactive<{ data: Record<string, any> }>({
  data: []
});
const userTypeList = reactive<{ data: Record<string, any> }>({
  data: []
});
const statusList = reactive<{ data: Record<string, any> }>({
  data: []
});

const changeTime = (e: any) => {
  if (e && e.length > 0) {
    form.data.startTime = dayjs(e[0]).format("YYYY-MM-DD 00:00:00");
    form.data.endTime = dayjs(e[1]).format("YYYY-MM-DD 23:59:59");
  } else {
    form.data.startTime = "";
    form.data.endTime = "";
  }
};
const handleJumpOverview = (item: Record<string, any>) => {
  if (item.name == '美团CDK') router.push({path: `/informationEntry`})
  if (item.name == '饿了么联名卡') router.push({path: `/informationEntry`})
}
const handleJump = (type: string, row: Record<string, any>) => {
  if (type == 'pay') router.push({path: `/paymentHistory/${row.riderInfo.phone}`, query: {id: row.id}})
  if (type == 'billing') router.push({path: `/invoicingRecord/${row.riderInfo.phone}`, query: {id: row.id}})
  if (type == 'surrender') {
    ElMessageBox.confirm(
        '确定退押吗?',
        '温馨提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
    )
        .then(async () => {
          // const resp = await baseRequest.post('', form.data) as any
          // if (resp.code == 0) {
          //   ElMessage({
          //     type: 'success',
          //     message: '录入信息成功',
          //   })
          //   resetPagination()
          // }
          ElMessage({
            type: 'success',
            message: '退押成功',
          })
          initialize()
        })
        .catch(() => {
        })
  }
}
const handExport = async () => {
  await baseRequest.exportFile("", form.data, `资产明细_${dayjs().format('YYYY.MM.DD')}.xlsx`)
};
onMounted(() => {
  queryDropDownBox()
  initialize();
});
const queryDropDownBox = async () => {
  const resp = await baseRequest.post('/userOrder/enums') as any
  paymentPlatformsList.data = resp.data['支付平台']
  userTypeList.data = resp.data['用户类型']
  statusList.data = resp.data['订单状态']

  const dataOverviewResp = await baseRequest.post('/userOrder/dataOverview') as any
  dataAtAGlance.data = Object.entries(dataOverviewResp.data).map((item, index) => {
    return {id: index, name: item[0], amount: item[1]}
  })
}
const initialize = async () => {
  const formData = JSON.parse(JSON.stringify(form.data));
  console.log(formData);

  // const resp = await baseRequest.get('/views/getAllDataOverview', {page:1,size:10,user_name:'刘力宾'}) as any
  // console.log(resp)
  // dataList.data = resp.data.list
  // form.data.total = resp.data.total
  dataList.data = [
    {
      id: 1,
      orderInfo: {
        orderNumber: "XNKSJAKDJKAJDDASDAS63",
        status: "成功",
        channel: "微信小程序"
      },
      riderInfo: {
        name: "花花",
        phone: "17634470940",
        type: "个人"
      },
      packageInfo: {
        originalPackageRental: 15000,
        quantityPurchased: 500,
        actualRent: 150000
      },
      paymentInfo: {
        discount: "5%",
        premium: 450,
        payTheTotalAmount: 1545
      },
      invoicingInfo: {
        invoiced: 5656,
        theTotalInvoicedAmount: 56565
      },
      surrender: 5656
    },
    {
      id: 2,
      orderInfo: {
        orderNumber: "XNKSJAKDJKAJDDASDAS63",
        status: "成功",
        channel: "微信小程序"
      },
      riderInfo: {
        name: "花",
        phone: "17634470941",
        type: "个人"
      },
      packageInfo: {
        originalPackageRental: 15000,
        quantityPurchased: 500,
        actualRent: 150000
      },
      paymentInfo: {
        discount: "5%",
        premium: 450,
        payTheTotalAmount: 1545
      },
      invoicingInfo: {
        invoiced: 5656,
        theTotalInvoicedAmount: 56565
      },
      surrender: ""
    },
    {
      id: 2,
      orderInfo: {
        orderNumber: "XNKSJAKDJKAJDDASDAS63",
        status: "成功",
        channel: "微信小程序"
      },
      riderInfo: {
        name: "花东",
        phone: "17634470942",
        type: "个人"
      },
      packageInfo: {
        originalPackageRental: 15000,
        quantityPurchased: 500,
        actualRent: 150000
      },
      paymentInfo: {
        discount: "5%",
        premium: 450,
        payTheTotalAmount: 1545
      },
      invoicingInfo: {
        invoiced: 5656,
        theTotalInvoicedAmount: 56565
      },
      surrender: ""
    }
  ] as any;
  form.data.total = 50;
};
const reset = () => {
  form.data = {
    date: [],
    startTime: "",
    endTime: "",
    paymentPlatforms: "all",
    userType: "全部",
    status: "全部",
    riderName: "",
    riderPhone: "",
    rentalOrderNumber: "",
    pageNo: 1,
    pageSize: 10,
    total: 0
  };
  initialize();
};
</script>
<style lang="scss" scoped>
.card_title {
  font-size: 16px;
  color: #333333;
  font-weight: bold;
}

.table_operation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #333333;
}

.table_format {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;

  & div {
    margin-top: 10px;
  }
}

.table_invoicedAmount {
  margin-right: 10px;
  font-size: 16px;

  & span:nth-of-type(2) {
    font-size: 20px;
    font-weight: bold;
  }
}

.dataAtAGlance_wapper {
  border: 1px solid #E7E7E7;
  margin-top: 10px;
  padding: 10px 0;

  .item_wrapper {
    margin-left: 20px;
    padding: 0 3% 0 0;
    height: 100px;
    border-right: 1px solid #E7E7E7;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    & span:nth-of-type(1) {
      font-size: 25px;
      color: #366EF4;
      font-weight: 600;
    }

    & span:nth-of-type(2) {
      font-size: 14px;
      color: #333333;
      font-weight: 500;
    }
  }
}

:deep(.date_prefix_show .el-range__icon) {
  display: none !important;
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}

:deep(.date_prefix_close .el-range__icon) {
  position: absolute !important;
  right: 15px !important;
  color: #333333 !important;
}
</style>
